<template>
  <div> 
    <mt-header fixed title="单项赛集体报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div ref="top">
      <div style="height:40px;"></div>
      <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
      <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>   
      <step current=2 :stepArr="stepArr"></step> 
      <div class="cf p10">
        <span class="fl f16 fwb mt5">报名人员</span>
        <span class='fr'>
          <mt-button size='small' plain type="primary" class="mr10"><i class="fa fa-refresh"></i> 刷新</mt-button>
          <mt-button size='small' @click="addMember" type="danger"><i class="fa fa-plus"></i> 添加队员</mt-button>        
        </span>
      </div>
    </div>
    <div class="team-content" style="overflow: auto;" ref="listContent">
      <ul class="team-list">
        <li v-for="(item, index) in list">            
          <div class="team-item-num"><i>{{index + 1}}</i></div>
          <div class="team-item-in">
            <div class="team-item-in-line">
              <div class="team-item-c">
                <popup-radio style="flex:1; width: 0;" v-model="item.certType" :options='certList' title="证件类型"></popup-radio>
                <input style="flex:1;" type="text" v-model="item.certNo" placeholder="证件号码"> 
              </div>
              <div class="team-item-c">
                <input style="flex:1;" type="text" v-model="item.name" placeholder="姓名">
                <input style="flex:1;" type="text" v-model="item.size" placeholder="衣码">
                <input style="flex:2;" type="text" v-model="item.mobile" placeholder="手机号">   
              </div>
              <div class="team-item-c">  
                <popup-age style="flex:1;" title="年龄" v-model="item.age"></popup-age>
                <popup-radio style="flex:1;" title="性别" v-model="item.sex" :options="sexArr"></popup-radio>          
                <!-- <i style="flex:1;" class="team-blue-btn">查找</i> -->
                <i style="flex:1;  background:#26a2ff; color:#fff;" class="team-gray-btn">验证</i>
                <i style="flex:1;" class="tc red">未注册</i>
              </div>
            </div>
          </div>
          <div style="background:#ddd; color:#000; display: flex; align-items: center;"  @click="removeMember(index)">
            <div style="padding:7px;">删<br>除</div> 
          </div> 
        </li>
      </ul>
    </div>
    <div style="display: flex; padding: 10px;" ref="bottom">
      <mt-button style="flex:1;" @click='$router.push("/enroll/team/step1")' plain class="mr10" type="primary">上一步</mt-button>
      <mt-button style="flex:1;" @click='$router.push("/enroll/team/step3")' type="primary">下一步</mt-button>
    </div>

    <mt-popup v-model="popupVisible" modal=false style="width:80%;">
      <div class="pop-page">
        <div class="pop-page-title-gray">提示</div>
        <div class="pop-page-content p20 f16">
          报名人员中有不是XX俱乐部的成员，是否向管该俱乐部理员发送加入申请？
        </div>
        <div class="pop-page-bottom"><i class="gray6" style="flex:.6" @click="popupVisible = false">取消</i><i class="blue" @click="popupVisible = false">发送请求并等待</i><i class="blue" style="flex:.8" @click="popupVisible = false">继续下一步</i></div>
      </div>
    </mt-popup>

  </div>
</template>

<script>
import step from '@/components/step'
import popupAge from '@/components/popupAge'
import popupRadio from '@/components/popupRadio'
export default {
  components:{
    step,popupAge,popupRadio
  },
  data () {
    return {
      stepArr:['选择俱乐部','报名人员','选择项目','选择队员','报名预览','支付完成'],
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      list:[
         {reg:true},
         {},
         {},
         {}
      ],
      popupVisible:false
    }
  },
  mounted(){
    this.$refs.listContent.style.maxHeight = (document.documentElement.clientHeight - this.$refs.top.offsetHeight - this.$refs.bottom.offsetHeight) + "px"; 
  },
  methods:{
    addMember(){
      this.list.push({}); 
      var that = this;
      setTimeout(function(){
        that.$refs.listContent.scrollTop  = "999999999";
      },100)

    },
    removeMember(i){
      this.list.splice(i,1);
    }
  }
}
</script>
